<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 6.0.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css" integrity="sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"example.com","root":"/","images":"/images","scheme":"Gemini","version":"8.7.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":true,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>
<meta name="description" content="定义函数定义一个函数  具名函数 123function 函数名(形式参数1, 形式参数2)&amp;#123;    return 返回值&amp;#125; 匿名函数, 具名函数去掉函数名就是匿名函数 1234let a &#x3D; function(x, y)&amp;#123;    return x + y&amp;#125;&#x2F;&#x2F; 也叫函数表达式 箭头函数 12345let f1 &#x3D; x &#x3D;&gt; x * xlet f2 &#x3D;">
<meta property="og:type" content="article">
<meta property="og:title" content="JS函数">
<meta property="og:url" content="http://example.com/2021/09/12/56/index.html">
<meta property="og:site_name" content="Xiaolong&#39;s Blog">
<meta property="og:description" content="定义函数定义一个函数  具名函数 123function 函数名(形式参数1, 形式参数2)&amp;#123;    return 返回值&amp;#125; 匿名函数, 具名函数去掉函数名就是匿名函数 1234let a &#x3D; function(x, y)&amp;#123;    return x + y&amp;#125;&#x2F;&#x2F; 也叫函数表达式 箭头函数 12345let f1 &#x3D; x &#x3D;&gt; x * xlet f2 &#x3D;">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-02_17-04-35.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-02_17-36-31.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-02_21-14-03.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-03_23-05-46.png">
<meta property="article:published_time" content="2021-09-12T04:30:56.000Z">
<meta property="article:modified_time" content="2021-10-07T04:31:17.046Z">
<meta property="article:author" content="Xiaolong">
<meta property="article:tag" content="js">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-02_17-04-35.png">


<link rel="canonical" href="http://example.com/2021/09/12/56/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"en","comments":true,"permalink":"http://example.com/2021/09/12/56/","path":"2021/09/12/56/","title":"JS函数"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>JS函数 | Xiaolong's Blog</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">Xiaolong's Blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a></li>
        <li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>Tags</a></li>
        <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>Search
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="Searching..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B0"><span class="nav-number">1.</span> <span class="nav-text">定义函数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E7%9A%84%E8%A6%81%E7%B4%A0"><span class="nav-number">2.</span> <span class="nav-text">函数的要素</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B0%83%E7%94%A8%E6%97%B6%E6%9C%BA"><span class="nav-number">2.1.</span> <span class="nav-text">调用时机</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="nav-number">2.2.</span> <span class="nav-text">作用域</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AD%E5%8C%85"><span class="nav-number">2.3.</span> <span class="nav-text">闭包</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BD%A2%E5%BC%8F%E5%8F%82%E6%95%B0"><span class="nav-number">2.4.</span> <span class="nav-text">形式参数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%94%E5%9B%9E%E5%80%BC"><span class="nav-number">2.5.</span> <span class="nav-text">返回值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B0%83%E7%94%A8%E6%A0%88"><span class="nav-number">2.6.</span> <span class="nav-text">调用栈</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E6%8F%90%E5%8D%87"><span class="nav-number">2.7.</span> <span class="nav-text">函数提升</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#arguments-%E5%92%8C-this"><span class="nav-number">2.8.</span> <span class="nav-text">arguments 和 this</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%81%87%E5%A6%82%E6%B2%A1%E6%9C%89-this"><span class="nav-number">2.8.1.</span> <span class="nav-text">假如没有 this</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E4%B8%80"><span class="nav-number">2.8.2.</span> <span class="nav-text">问题一</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E4%BA%8C"><span class="nav-number">2.8.3.</span> <span class="nav-text">问题二</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B8%80%E7%A7%8D%E5%9C%9F%E6%96%B9%E6%B3%95%EF%BC%8C%E7%94%A8%E5%8F%82%E6%95%B0"><span class="nav-number">2.8.4.</span> <span class="nav-text">一种土方法，用参数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#JS-%E5%9C%A8%E6%AF%8F%E4%B8%AA%E5%87%BD%E6%95%B0%E9%87%8C%E5%8A%A0%E4%BA%86-this"><span class="nav-number">2.8.5.</span> <span class="nav-text">JS 在每个函数里加了 this</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">2.8.6.</span> <span class="nav-text">总结</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#call-%E6%8C%87%E5%AE%9A-this"><span class="nav-number">2.8.7.</span> <span class="nav-text">call 指定 this</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="nav-number">3.</span> <span class="nav-text">箭头函数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0"><span class="nav-number">4.</span> <span class="nav-text">立即执行函数</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-overview">
            <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Xiaolong"
      src="/images/lion.jpg">
  <p class="site-author-name" itemprop="name">Xiaolong</p>
  <div class="site-description" itemprop="description">Never stop learning</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">45</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">17</span>
        <span class="site-state-item-name">tags</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://github.com/drwna" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;drwna" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
  </div>



          </div>
        </div>
      </div>
        <div class="back-to-top animated" role="button" aria-label="Back to top">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="reading-progress-bar"></div>

  <a href="https://github.com/Drwna" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="en">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/09/12/56/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/lion.jpg">
      <meta itemprop="name" content="Xiaolong">
      <meta itemprop="description" content="Never stop learning">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Xiaolong's Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          JS函数
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-09-12 12:30:56" itemprop="dateCreated datePublished" datetime="2021-09-12T12:30:56+08:00">2021-09-12</time>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h2 id="定义函数"><a href="#定义函数" class="headerlink" title="定义函数"></a>定义函数</h2><p>定义一个函数</p>
<ul>
<li><p>具名函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> 函数名(形式参数<span class="number">1</span>, 形式参数<span class="number">2</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> 返回值</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>匿名函数, 具名函数去掉函数名就是匿名函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="keyword">function</span>(<span class="params">x, y</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> x + y</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 也叫函数表达式</span></span><br></pre></td></tr></table></figure></li>
<li><p>箭头函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title function_">f1</span> = x =&gt; x * x</span><br><span class="line"><span class="keyword">let</span> <span class="title function_">f2</span> = (<span class="params">x, y</span>) =&gt; x + y <span class="comment">// 圆括号不能省</span></span><br><span class="line"><span class="keyword">let</span> <span class="title function_">f3</span> = (<span class="params">x, y</span>) =&gt; &#123; <span class="keyword">return</span> x - y&#125; <span class="comment">// 花括号不能省</span></span><br><span class="line"><span class="keyword">let</span> <span class="title function_">f4</span> = (<span class="params">x, y</span>) =&gt; (&#123;<span class="attr">name</span>: x, <span class="attr">age</span>: y&#125;)</span><br><span class="line"><span class="comment">// 直接返回对象 需要加个圆括号</span></span><br></pre></td></tr></table></figure></li>
<li><p>构造函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> f = <span class="keyword">new</span> <span class="title class_">Function</span>(<span class="string">&#x27;x&#x27;</span>, <span class="string">&#x27;y&#x27;</span>, <span class="string">&#x27;return x + y&#x27;</span>)</span><br><span class="line"><span class="comment">// 基本没人用, 但是能让你知道函数是谁构造的</span></span><br><span class="line"><span class="comment">// 所有函数都是 Function 构造的</span></span><br><span class="line"><span class="comment">// 包括 Object、Array、Function</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="函数的要素"><a href="#函数的要素" class="headerlink" title="函数的要素"></a>函数的要素</h2><p>每个函数都拥有这些</p>
<ul>
<li>调用时机</li>
<li>作用域</li>
<li>闭包</li>
<li>形式参数</li>
<li>返回值</li>
<li>调用栈</li>
<li>函数提升</li>
<li>arguments（除了箭头函数）</li>
<li>this（除了箭头函数）</li>
</ul>
<h3 id="调用时机"><a href="#调用时机" class="headerlink" title="调用时机"></a>调用时机</h3><p>时机不同, 结果不同</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>( <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">    &#125;, <span class="number">0</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn</span>()</span><br><span class="line">a = <span class="number">2</span></span><br><span class="line"><span class="comment">// 打印结果为 2</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> i = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span>(i = <span class="number">0</span>; i &lt; <span class="number">6</span>; i++)&#123;</span><br><span class="line">    <span class="title function_">setTimeoug</span>( <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span><br><span class="line">    &#125;, <span class="number">0</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 打印结果为 6个6</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">6</span>; i++)&#123;</span><br><span class="line">    <span class="title function_">setTimeoug</span>( <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span><br><span class="line">    &#125;, <span class="number">0</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 打印结果为 0, 1, 2, 3, 4, 5</span></span><br><span class="line"><span class="comment">// 因为 JS　在　for 和 let 一起用的时候会加东西</span></span><br><span class="line"><span class="comment">// 每次循环会多创建一个 i</span></span><br></pre></td></tr></table></figure>



<h3 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h3><p>每个函数都会创建一个作用域</p>
<p><a target="_blank" rel="noopener" href="https://blog.fundebug.com/2019/03/15/understand-javascript-scope/">深入理解 JS 作用域和作用域链</a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 例1</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>)&#123; <span class="keyword">let</span> a = <span class="number">1</span>; &#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a) <span class="comment">// a 不存在</span></span><br><span class="line"><span class="comment">// 问: 是不是因为 fn 没执行导致</span></span><br><span class="line"><span class="comment">// 答: 就算 fn 执行了,也访问不到作用域里面的 a</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 例2function f1()&#123;    let a = 1;        function f2()&#123;        let a = 2;         console.log(a);    &#125;        console.log(a);    a = 3;    f2();    console.log(a)&#125;f1()// 打印结果为 /*  1 	2	3*/</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 例3function f1()&#123;    let a = 1;    function f2()&#123;        let a = 2;        function f3()&#123;            console.log(a)        &#125;        a = 22;        f3();    &#125;    console.log(a);    a = 100;    f2();&#125;f1();/* 打印机结果为122*/</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p><strong>如果多个作用域有同名变量 a</strong></p>
<p>那么查找 a 的声明式, 就向上取最近的作用域, 简称[就近原则]</p>
<p>查找 a 的过程与函数执行无关</p>
<p>但 a 的值与函数执行有关</p>
</blockquote>
<h3 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h3><p><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/22486908">JS中的闭包是什么</a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">f1</span>(<span class="params"></span>)&#123;    <span class="keyword">let</span> a = <span class="number">1</span>;    <span class="keyword">function</span> <span class="title function_">f2</span>(<span class="params"></span>)&#123;        <span class="comment">//        let a = 2;        function f3()&#123;            console.log(a)        &#125;//               /*		如果一个函数用到外部的变量		那么这个函数加这个变量		就叫做 闭包		左边的 a 和 f3 组成了 闭包		*/                a = 22;        f3();    &#125;    console.log(a);    a = 100;    f2();&#125;f1();</span></span><br></pre></td></tr></table></figure>



<h3 id="形式参数"><a href="#形式参数" class="headerlink" title="形式参数"></a>形式参数</h3><p>形式参数意思式非实际参数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span> (x, y)&#123;    <span class="keyword">return</span> x + y;&#125;<span class="comment">// 其中 x 和 y 就是形参,因为并不是时机的参数add(1, 2);// 调用 add 时,1 和 2 是实际参数,会被复制给 x y// 上面代码近似等于下面代码function add()&#123;    var x = arguments[0]    var y = arguments[1]    return x + y&#125;</span></span><br></pre></td></tr></table></figure>



<h3 id="返回值"><a href="#返回值" class="headerlink" title="返回值"></a>返回值</h3><p>每个函数都有返回值</p>
<p>函数执行完了后才会返回</p>
<p>只有函数有返回值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">hi</span>(<span class="params"></span>) &#123; <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;hi&#x27;</span>); &#125;<span class="title function_">hi</span>();<span class="comment">// 没写 return, 所以返回值是 undefinedfunction hi() &#123; return console.log(&#x27;hi&#x27;); &#125;hi()// 返回值为 console.log(&#x27;hi&#x27;) 的值,即 undefined</span></span><br></pre></td></tr></table></figure>



<h3 id="调用栈"><a href="#调用栈" class="headerlink" title="调用栈"></a>调用栈</h3><p>什么是调用栈</p>
<blockquote>
<p>JS 引擎在调用一个函数前</p>
<p>需要把函数所在的环境 push 到一个数组里</p>
<p>这个数组叫做调用栈</p>
<p>等函数执行完了, 就会把环境弹 (pop) 出来</p>
<p>然后 return 到之前的环境, 继续执行后续代码</p>
</blockquote>
<center><img src="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-02_17-04-35.png" alt="Snipaste_2021-09-02_17-04-35"></center><center style="font-size:14px;color:#C0C0C0;text-decoration:underline">调用栈 图示</center> 



<p>爆栈, 如果调用栈中压入的帧过多, 程序就会奔溃</p>
<p>递归函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 阶乘function f(n) &#123;    return n !== 1 ? n * f(n - 1) : 1&#125;// 理解递归f(4)= 4 * f(3)= 4 * (3 * f(2))= 4 * (3 * (2 * f(1)))= 4 * (3 * (1))= 4 * (6)= 24// 先递进, 后回归</span></span><br></pre></td></tr></table></figure>

<center><img src="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-02_17-36-31.png" alt="Snipaste_2021-09-02_17-36-31" width='800px'></center><center style="font-size:14px;color:#C0C0C0;text-decoration:underline">递归函数调用栈 图示</center> 



<p>调用栈最长有多少</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 测试调用栈长度function computeMaxCallStackSize() &#123;    try &#123;        return 1 + computeMaxCallStackSize();    &#125; catch(e) &#123;        // 报错说明 stack overflow 了        return 1    &#125;&#125;/*chrom 11409firefox 24740node 12536*/</span></span><br></pre></td></tr></table></figure>



<h3 id="函数提升"><a href="#函数提升" class="headerlink" title="函数提升"></a>函数提升</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>)&#123;&#125;<span class="comment">// 不管把具名函数声明在哪里, 它都会跑到第一行</span></span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/liuhe688/p/5891273.html">JS 变量提升和函数提升</a></p>
<p><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000038344251">前端面试必考-JS 变量提升和函数提升详解</a></p>
<h3 id="arguments-和-this"><a href="#arguments-和-this" class="headerlink" title="arguments 和 this"></a>arguments 和 this</h3><p>每个函数都有 arguments 和 this ，除了箭头函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>)&#123;    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>);    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)&#125;<span class="title function_">fn</span>()<span class="comment">// arguments 是包含所有参数的 伪数组// 如果不给任何条件 this 默认指向 window</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>)&#123;    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)&#125;<span class="title function_">fn</span>()fn.<span class="title function_">call</span>(<span class="number">1</span>) <span class="comment">// 打印出的 数字 1 被自动转化成对象 1function fn()&#123;    &#x27;use strict&#x27;    console.log(this)&#125;fn.call(1) // 打印出 数字 1function fn()&#123;  console.log(this);  console.log(arguments)&#125;// 传入的第一个参数是 this, 其余的是 argumentsfn.call(1, 2, 4)/*打印结果Number (1)Arguments&#123;0: 2, 1: 4 ...&#125;*/</span></span><br></pre></td></tr></table></figure>

<center><img src="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-02_21-14-03.png" alt="Snipaste_2021-09-02_21-14-03" width="600px"></center><center style="font-size:14px;color:#C0C0C0;text-decoration:underline">arguments 和 this</center> 

<blockquote>
<p>this 是隐藏参数</p>
<p>arguments 是普通参数</p>
<p>this 是参数(个人结论)</p>
</blockquote>
<h4 id="假如没有-this"><a href="#假如没有-this" class="headerlink" title="假如没有 this"></a>假如没有 this</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = &#123;    <span class="attr">name</span>: <span class="string">&#x27;frank&#x27;</span>,    <span class="title function_">sayHi</span>(<span class="params"></span>)&#123;        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;hello, i am &#x27;</span> + person.<span class="property">name</span>);    &#125;&#125;person.<span class="title function_">sayHi</span>()<span class="comment">/* 分析可以用直接保存了对象地址的 变量 获取 &#x27;name&#x27;这种办法简称为 引用*/</span></span><br></pre></td></tr></table></figure>

<h4 id="问题一"><a href="#问题一" class="headerlink" title="问题一"></a>问题一</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> sayHi = <span class="keyword">function</span>(<span class="params"></span>)&#123;    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;hello, i am &#x27;</span> + <span class="comment">/* person*/</span>.<span class="property">name</span>)&#125;<span class="keyword">let</span> person = &#123;    <span class="attr">name</span>: <span class="string">&#x27;frank&#x27;</span>,    <span class="string">&#x27;sayHi&#x27;</span>: sayHi.&#125;<span class="comment">/*分析person 如果改名，sayHi 函数就挂了sayHi 函数甚至有可能在另一个文件里所以我们不希望 sayHi 函数里出现 person 引用*/</span></span><br></pre></td></tr></table></figure>

<h4 id="问题二"><a href="#问题二" class="headerlink" title="问题二"></a>问题二</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Perosn</span> &#123;    <span class="title function_">constructot</span>(<span class="params">name</span>)&#123;        <span class="variable language_">this</span>.<span class="property">name</span> = name        <span class="comment">// 这里的 this 是 new 强制指定的    &#125;    sayHi()&#123;        console.log(/*????*/)    &#125;&#125;/*分析这里只有类，还没创建对象，故不可能获取对象的引用那么如何拿到对象的 name ？*//*需要一种办法拿到对象这样才能获取对象的 name 属性*/</span></span><br></pre></td></tr></table></figure>

<h4 id="一种土方法，用参数"><a href="#一种土方法，用参数" class="headerlink" title="一种土方法，用参数"></a>一种土方法，用参数</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 对象let person = &#123;    name: &#x27;frank&#x27;,    sayHi(p) &#123;        console.log(&#x27;hello, i am &#x27; + p.name)    &#125;&#125;person.sayHi(person)// 类class Person &#123;    constructor(name)&#123; this.name = name &#125;    sayHi(p) &#123;        console.log(&#x27;hello, i am &#x27; + p.name)    &#125;&#125;let person = new Person(&#x27;frank&#x27;)person.sayHi(person)</span></span><br></pre></td></tr></table></figure>

<h4 id="JS-在每个函数里加了-this"><a href="#JS-在每个函数里加了-this" class="headerlink" title="JS 在每个函数里加了 this"></a>JS 在每个函数里加了 this</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 用 this 获取那个对象let person = &#123;    name: &#x27;frank&#x27;,    sayHi(/*this*/)&#123;        console.log(&#x27;hello, i am &#x27; + this.name)    &#125;&#125;person.sayHi()/*person.sahHi()相当于 person.sayHi(person)然后 person 被传给 this 了 (person 是个地址)这样每个函数都能用 this 获取一个未知对象的引用了*/// person.sayHi() 会隐式地把 person 作为 this 传给 sayHi// 方便 sayHi 获取 person 对应的对象</span></span><br></pre></td></tr></table></figure>

<h4 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h4><blockquote>
<p>我们想让函数获取对象的引用</p>
<p>但是并不想通过变量名做到</p>
<p>Python 通过额外的 self 参数做到 </p>
<p>JS 通过额外的 this 做到:</p>
<p>person.sayHi() 会把person 自动传给 sayHi, sayHi 可以通过 this 引用 person</p>
</blockquote>
<p>其他</p>
<ul>
<li>注意 person.sayHi 和 person.sayHi() 的区别</li>
<li>注意 person.sayHi() 的短句 (person.sayHi)()</li>
</ul>
<h4 id="call-指定-this"><a href="#call-指定-this" class="headerlink" title="call 指定 this"></a>call 指定 this</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 哪个对let person = &#123;    name: &#x27;frank&#x27;,    sayHi(/*this*/)&#123;        console.log(&#x27;hello, i am &#x27; + this.name)    &#125;&#125;person.sayHi()Person.sayHi(person)// 省略形式的反而是对的// 两种调用方式person.sayHi()// 会自动把 person 传到函数里, 作为 thisperson.sayHi.call(person)person.sayHi.call(&#123;name: &#x27;evan&#x27;&#125;)// 需要手 动把 person 传到函数里,作为 this// 推荐使用</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 例1function add(x, y) &#123;    return x + y&#125;add.call(undefined, 1, 2) // 3/*为什么要多写一个 undefined因为第一个参数要作为 this但是代码里没有用 this所以只能用 undefined 占位其实用 null 也可以*/</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 例2Array.prototype.forEach2 = function(fn)&#123;    for(let i = 0; i &lt; this.length; i++)&#123;        fn(this[i], i, this)    &#125;&#125;let arr1 = [2, 4, 5]// 两种调用方式arr1.forEach2.call(arr1, (item) = &gt; console.log(item))arr1.forEach2((item) = &gt; console.log(item))/* this 是什么由于大家使用 forEach2 的时候总是会用 arr.forEach2所以 arr1 就被自动传给 foreEach2 了*//* this 一定是数组吗不一定, 比如Array.prototype.forEach2.call(&#123;0: &#x27;a&#x27;, 1: &#x27;b&#x27;,length: 2&#125;)*/</span></span><br></pre></td></tr></table></figure>

<p><strong>this 的两种使用方法</strong></p>
<ul>
<li><p>隐式传递</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">fn</span>(<span class="number">1</span>, <span class="number">2</span>) <span class="comment">// 等价于 fn.call(undefined, 1, 2)obj.child.fn(1) // 等价于 obj.child.fn.call(obj.child, 1)</span></span><br></pre></td></tr></table></figure></li>
<li><p>显示传递</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fn.<span class="title function_">call</span>(<span class="literal">undefined</span>, <span class="number">1</span>, <span class="number">2</span>)fn.<span class="title function_">apply</span>(<span class="literal">undefined</span>, [<span class="number">1</span>, <span class="number">2</span>]) <span class="comment">// 数组</span></span><br></pre></td></tr></table></figure></li>
</ul>
<p>**绑定 this **</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用 .bind 可以让 this 不被改变function f1(p1, p2)&#123;    console.log(this, p1, p2)&#125;let f2 = f1.bind(&#123;name: &#x27;frank&#x27;&#125;)// 那么 f2 就是 f1 绑定 this 之后的新函数f2() // 等价于 f1.call(&#123;name: &#x27;frank&#x27;&#125;)</span></span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000004580525">快速理解 JS 中 this 的用法与陷阱</a></p>
<h2 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h2><p><strong>没有 arguments 和 this</strong></p>
<p>里面的 this 就是外面的 this</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// windowlet fn = () =&gt; console.log(this)fn() // window// 就算加了 call 也没用fn.call(&#123;name: &#x27;frank&#x27;&#125;) // window</span></span><br></pre></td></tr></table></figure>



<h2 id="立即执行函数"><a href="#立即执行函数" class="headerlink" title="立即执行函数"></a>立即执行函数</h2><center><img src="https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-03_23-05-46.png" alt="Snipaste_2021-09-03_23-05-46" width="800px"></center><center style="font-size:14px;color:#C0C0C0;text-decoration:underline">立即执行函数</center> 

<p>推荐 <a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000003902899">JS 中的立即执行函数</a></p>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/js/" rel="tag"><i class="fa fa-tag"></i> js</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2021/09/08/14/" rel="prev" title="跨域">
                  <i class="fa fa-chevron-left"></i> 跨域
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2021/09/12/01/" rel="next" title="浅析jQuery设计思想">
                  浅析jQuery设计思想 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 2021 – 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Xiaolong</span>
</div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script>

  
<script src="/js/third-party/search/local-search.js"></script>




  





</body>
</html>
